<template>
  <div class="home">
    <Desktop v-if="isDesktop"></Desktop>
    <Mobile v-else></Mobile>
  </div>
</template>

<script setup>
import { onActivated } from 'vue'
import { useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
import { useHeadStore } from '@/store/head'
import { useForyouStore } from '@/store/home/foryou'
import { useNavStore } from '@/store/nav'
import asyncCompWithLoading from '@/utils/async-comp-with-loading'

const { toHomeHead } = useHeadStore()

const Desktop = asyncCompWithLoading(() => import('./Desktop.vue'))
const Mobile = asyncCompWithLoading(() => import('./Mobile.vue'))

const appStore = useAppStore()
const { isDesktop } = storeToRefs(appStore)

const route = useRoute()

// 依據第一次進來的 route.query 初始化推薦頁參數
const foryouStore = useForyouStore()
const { setParams } = foryouStore
const { share_aff } = route.query
setParams(share_aff)

// 依據第一次進來的 route.params.tab 初始化 navStore 中的 home tab 值
const { initHomeTab } = useNavStore()
const { tab } = route.params
initHomeTab(tab)

onActivated(() => toHomeHead())
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
}
</style>
